<template>
  <div id="zb_app">
    <!-- 头部导航 -->
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item style="font-size:25px; margin-right:850px;">UNI-ADMIN</el-menu-item>
      <el-menu-item index="1">
          <router-link to="/index/home" tag="span">首页</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/index/goods" tag="span">商品</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/index/order" tag="span">订单</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <router-link to="/index/member" tag="span">会员</router-link>
      </el-menu-item>
      <el-menu-item index="5">
        <router-link to="/index/setup" tag="span">设置</router-link>
      </el-menu-item>
      <el-submenu index="6">
        <template slot="title">{{this.$store.state.user}}</template>
        <el-menu-item index="6-1">修改</el-menu-item>
        <el-menu-item index="6-2" @click="zb_tui">退出</el-menu-item>
      </el-submenu>
    </el-menu>
    <!-- 主要区域 -->
    <section>
      <!-- 占位符 -->
      <router-view></router-view>
      <!-- 占位符 -->
    </section>
  </div>
</template>

<script>
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1"
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //退出
    zb_tui() {
      this.$confirm("你确定要退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        //退出成功
        .then(() => {
          this.$axios.post("/admin/logout").then(res => {
            //清除vuex中的token值
            sessionStorage.clear(this.$store.state.token);
            // //删除token值
            // sessionStorage.removeItem("user_token");
            //跳转到login页面
            this.$router.push("/admin/login");
            this.$message.success("退出成功");
          });
          this.$message({
            type: "success",
            message: "退出成功!"
          });
        })
        //取消退出
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
</style>
